<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <style type="text/css">
    .login {
      height: 190px;
      width: 340px;
      padding: 20px;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 4px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -150px 0 0 -150px;
      z-index: 99;
    }

    a {
      width: 300px;
    }

    .carousel {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 90;
      background-color: rgba(0, 0, 0, 0.3);
    }
  </style>
</head>
<body>
<div class="layui-carousel carousel" lay-filter="carousel" id="carousel">
  <div carousel-item="">
    <!--这里可添加多张图片轮播展示-->
    <div><img src="/images/back2.jpg"></div>
    <div><img src="/images/back3.jpg"></div>


  </div>
  <div class="layui-container login">
    <form id="loginForm" action="/user/login" class="layui-form" method="post" layui-form-pane>
      <input name="type" type="hidden" value="1">
      <input type="text" name="username" lay-verify="required" placeholder="请输入账号" autocomplete="off"
             class="layui-input">
      <br>
      <input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off"
             class="layui-input">
      <br>
      <a class="layui-btn  layui-btn-normal " lay-filter="submit" lay-submit="" id="submit">登陆</a>
    </form>
  </div>
</div>
</body>
<script src="/layui/layui.js"></script>
<script src="/js/core.util.js"></script>
<script>
  layui.use(['form', 'jquery', 'carousel'], function () {
    var layer = layui.layer;
    var form = layui.form;
    var $ = layui.jquery;
    var carousel = layui.carousel;
    form.on('submit', function (data) {
      CoreUtil.sendAjax("/api/user/login", JSON.stringify(data.field), function (res) {
        layer.msg(res.msg);
        CoreUtil.setData("access_token", res.data.accessToken);
        CoreUtil.setData("refresh_token", res.data.refreshToken);
        window.location.href = "/index/home";
      }, "POST");
      return false;
    });
    //改变下时间间隔、动画类型、高度
    carousel.render({
      elem: '#carousel'
      , interval: 2000
      , anim: 'fade'
      , full: true        //全屏
      , width: '100%'
      , arrow: 'none'
    });
  })
</script>
</html>